import { EditorTheme } from '@/types/enum/configEnum'
import { useConfigStore } from '@/stores/useConfigStore'
import { ref } from 'vue'

// 用于改变编辑器主题的hooks
export function useChangeEditorConfig() {
  //  ========= 更换主题 =============
  const darkHeaderColor = '#383838'
  const darkFontColor = '#fff'
  const darkBgc = '#1e1e1e'

  const lightHeaderColor = '#fffafa'
  const lightFontColor = '#0C0C0C'
  const lightBgc = '#fffffe'

  const setDarkTheme = () => {
    document.documentElement.style.setProperty(
      '--header-color',
      darkHeaderColor
    )
    document.documentElement.style.setProperty('--font-color', darkFontColor)
    document.documentElement.style.setProperty('--flow-chart-bgc', darkBgc)
  }

  const setLightTheme = () => {
    document.documentElement.style.setProperty(
      '--header-color',
      lightHeaderColor
    )
    document.documentElement.style.setProperty('--font-color', lightFontColor)
    document.documentElement.style.setProperty('--flow-chart-bgc', lightBgc)
  }

  const handleThemeChange = (editor: any) => {
    if (editor.value) {
      editor.value.setTheme(editorOptions.value.theme)
    }
    if (editorOptions.value.theme === 'vs-dark') {
      setDarkTheme()
    } else if (editorOptions.value.theme === 'vs-light') {
      setLightTheme()
    }
  }
  // ================================================

  // ========== 更换字体大小 ================
  const getFontSizeOptions = () => {
    const options = []
    for (let i = 12; i <= 24; i++) {
      options.push({
        label: `${i}px`,
        value: i,
      })
    }
    return options
  }
  const handleFontSizeChange = (editor: any) => {
    if (editor.value) {
      editor.value.setFontSize(editorOptions.value.fontSize)
    }
  }
  const { getEditorConfig } = useConfigStore()

  // 导出编辑器的配置项
  const editorOptions = ref({
    theme: getEditorConfig().theme as EditorTheme,
    fontSize: getEditorConfig().fontSize as number,
    fontSizeOptionsList: getFontSizeOptions(),
  })

  return {
    setDarkTheme,
    setLightTheme,
    editorOptions,
    handleFontSizeChange,
    handleThemeChange,
  }
}
